<template lang="pug">
  .alertWrapper(:class="[type, size]")
    .title(v-if="title")
      i(:class="icon" v-if="showIcon")
      slot(name="title") {{title}}
    .message
      img(src="@/assets/remind.png")
      slot {{message}}
</template>
<script>
export default {
  name: 'Alert',
  props: {
    type: {
      type: String,
      default: 'info'
    },
    title: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    showIcon: {
      type: Boolean,
      default: false
    }
  },
  data () {
    let icon = ''
    switch (this.type) {
      case 'warning':
        icon = 'el-icon-warning'
        break
      case 'success':
        icon = 'el-icon-success'
        break
      case 'error':
        icon = 'el-icon-error'
        break
      default:
        icon = 'el-icon-info'
    }
    return {
      icon
    }
  },
  create () {
    console.log(this)
  }
}
</script>
<style lang="scss">
.alertWrapper {
  background: #FFFFFF;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.04), 0px 16px 24px 2px rgba(0, 0, 0, 0.01), 0px 6px 30px 5px rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  border: 1px solid #EBEBEE;
  padding: 13px 16px;

  &.small {
    padding: 8px 12px;

    .message {
      display: flex;
      align-items: center;
      line-height: 0;

      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
      font-style: normal;
      text-transform: none;

      img {
        margin-right: 8px;
      }
    }
  }

  .title {
    color: $--color-text-primary;
    font-size: 16px;
  }

  // .message {
  //   color: $--color-text-regular;
  //   font-size: 14px;

  //   p {
  //     margin: 5px 0
  //   }
  // }

  // &.info {
  //   background-color: #e6f7ff;
  //   border: 1px solid #91d5ff;

  //   i {
  //     color: #1890ff;
  //   }
  // }

  // &.success {
  //   background-color: #f6ffed;
  //   border: 1px solid #b7eb8f;

  //   i {
  //     color: #52c41a;
  //   }
  // }

  // &.warning {
  //   background-color: #fffbe6;
  //   border: 1px solid #ffe58f;

  //   i {
  //     color: #faad14;
  //   }
  // }

  // &.error {
  //   background-color: #fff1f0;
  //   border: 1px solid #ffa39e;

  //   i {
  //     color: #f5222d;
  //   }
  // }

}
</style>
